   <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}

				#title{
					background-color: #20A0FF; /*设置标题栏的底色*/
					height: 60px;/*设置标题栏的高度*/
				}
				#title>div{
					width: 230px; /*设置标题的宽度*/
					text-align: center;/*设置文本内容居中*/
					height: 100%; /*设置div宽度和父级一致*/
					border-right: white 1px solid;/*设置左边框颜色、宽度*/
				}
				#title>div span{
					display: inline-block;/*设置父级元素为内联块元素，可以使用margin*/
					color: #FFFFFF; /*设置字体颜色为白色*/
					font-size: 25px;/*设置字体大小*/
					line-height:25px;/*设置字体行高*/
					height: 25px;/*设置当前元素高度*/
					width: 175px;/*设置当前元素宽度*/
					margin-top: 17px;/*设置向下平移保持居中*/

				}


    			ul {
    				list-style: none;/*去掉列表之前的点*/
    			}

				/*去掉超链接的下划线*/
    			a {
    				text-decoration: none;
    			}

				/*设置内容居中*/
    			.main {
    				width: 100%;
    			}

    			.tab {
    				height: 60px; /*设置ul高度*/
    				border: 1px solid #ccc;/*设置ul边框线*/
    			}
				/*设置被激活li的上边框颜色*/
    			.tab>.active {
					border-bottom: 4px solid #20A0FF;/*设置被激活li下边框宽度颜色*/
    			}

    			.tab>li {
    				float: left;  /*设置所有的li左浮动，可以排在一行*/
    				height: 60px; /*设置每个li的高度*/
    				line-height: 60px;/*设置每个li的行高*/
					text-align: center; /*设置文本内容居中*/
					width: 120px; /*设置链接的宽度*/
    			}

    			.tab>li>a {
					font-size: 15px; /*设置文本字体大小*/
    				color: #000; /*字体颜色设置为黑色*/
    			}

    			.products {
    				overflow: auto;/*若内容有超出，做滚动处理*/
					width: 100%;

    			}


    			.products>div {
    				display: none;/*设置所有的div隐藏*/
    			}

                .products>.show {
    				display: block;
    			}
    		</style>
    		<script>
                function menu_action(index){
                    els = document.getElementsByClassName("tabtitle");
                    for (i in els){
                        if (i==index){
                            els[i].className = "tabtitle active"
                        }else{
                           els[i].className = "tabtitle"
                        }
                    }
                    els = document.getElementsByClassName("product");
                    for (j in els){
                        if (j==index){
                            els[j].className = "product show"
                        }else{
                           els[j].className = "product"
                        }
                    }

                }

            </script>
    	</head>
    	<body>

			<div id="title">
				<div>
					<span>自动化测试平台</span>
				</div>
			</div>
    		<div class="main">
				<div>
					<ul class="tab" id="tab">
						<!--设置class属性值为active，为了设置导航栏顶部的红色线条-->
						<li class="tabtitle active" onclick="menu_action(0)">
							<a href="javascript:;">项目概况</a>
						</li>
						<li class="tabtitle" onclick="menu_action(1)">
							<a href="javascript:;">Host配置</a>
						</li>
						<li class="tabtitle" onclick="menu_action(2)">
							<a href="javascript:;">API接口</a>
						</li>
						<li class="tabtitle" onclick="menu_action(3)">
							<a href="javascript:;">自动化测试</a>
						</li>
						<li class="tabtitle" onclick="menu_action(4)">
							<a href="javascript:;">成员管理</a>
						</li>
						<li class="tabtitle" onclick="menu_action(5)">
							<a href="javascript:;">项目动态</a>
						</li>
						<li class="tabtitle" onclick="menu_action(6)">
							<a href="javascript:;">自动化测试报告</a>
						</li>
					</ul>
				</div>
    			<div class="products" id="products">
					<div class="product show">项目概况</div>
					<div class = "product">Host配置</div>
					<div class = "product">API接口</div>
					<div class = "product">自动化测试</div>
					<div class = "product">成员管理</div>
					<div class = "product">项目动态</div>
					<div class = "product">自动化测试报告</div>
    			</div>
    		</div>
    	</body>
    </html>
